<template>
    <el-drawer v-model="openPack" title="服务包详情" size="50%">
        <el-card style="background: #f2f7fb;">
            <div style="display: flex;">
                <div>
                    <img :src="serviceData.image" alt="" class="packImg">
                </div>
                <div class="packDetails">
                    <div class="packName">
                        <span> {{ serviceData?.name }}</span>
                        <el-tag type='warning' round style="font-size: 15px;margin-bottom: 5px;">{{
                            serviceData.type }}</el-tag>
                    </div>
                    <el-form-item label="订购定价：" style="color: red;">￥{{ serviceData.price }}</el-form-item>

                    <el-form-item label="服务对象：">{{ serviceData.client }}</el-form-item>
                    <el-form-item label="签约周期：">{{ serviceData.period }}(可续签)</el-form-item>
                    <el-form-item label="服务介绍：">{{ serviceData.intro }}</el-form-item>
                </div>
            </div>
        </el-card>
        <!-- 表格 -->
        <p style="margin-top: 20px;margin-bottom: 20px;">服务项目</p>
        <el-table :data="packTableData.serviceItemIds"
            :header-cell-style="{ background: '#f2f2f27f', fontWeight: 'normal', color: '#515a6e' }"
            style="font-size: 13px;">
            <el-table-column label="项目编号" prop="_id" width="150">
                <template #default="scope">
                    {{ scope.row._id ? scope.row._id.substring(0, 10) : '' }}
                </template>
            </el-table-column>
            <el-table-column label="项目名称" prop="name" width="150" align="left" />
            <el-table-column label="次数" prop="count" width="80">
                <template #default="{ row }">
                    <span style="color: #2984f8;">{{ row.count }}次</span>
                </template>
            </el-table-column>

            <el-table-column label="项目类型" prop="type" required width="100" />
            <el-table-column label="项目介绍" prop="intro" />
            <!-- <el-table-column label="操作" width="120"> -->
            <!-- <template #default="scope">
                    <el-button link style="color:#FA7468;" plain @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column> -->

        </el-table>

    </el-drawer>
</template>

<script setup>
import { getPackDetailApi } from '@/api/team';
import { onMounted, ref } from 'vue';
const openPack = ref(false)

let serviceData = ref({});

const packTableData = ref({
    serviceItemIds: []
})



function openWin(data, uid) {
    openPack.value = true
    serviceData.value = data
    accPackDetail(uid)
    console.log(';', serviceData);

}
console.log(serviceData);

// onMounted(()=>{
//     accPackDetail()
// })
async function accPackDetail(uid) {
    const res = await getPackDetailApi({
        _id: uid
    })
    if (res.code == 200) {
        packTableData.value.serviceItemIds = res.data.serviceItemIds
    }
}


defineExpose({
    openWin
})
</script>

<style scoped lang="scss">
.packName {
    margin-bottom: 20px;

    span {
        font-size: 20px;
        margin-right: 20px;
        // font-weight: 550;
    }
}

.packDetails {
    text-align: left;
    margin-left: 30px;
}

.packImg {
    width: 285px;
    height: 220px;
    margin-top: 50px;
}
</style>